<template>
  <div>
    <el-button @click="back" type="primary">返回</el-button>

    <el-row>
      <el-col :span="8">

        <el-card>
          <div slot="header" class="clearfix">
            <span>业主信息</span>
          </div>
          <p>
            <span>业主姓名:</span>
            <span class="item">{{userName}}</span>
          </p>
          <hr />
          <p>
            <span>手机号码:</span>
            <span class="item">{{phonenumber}}</span>
          </p>
          <hr />
          <p>
            <span>身份证号:</span>
            <span class="item">{{idcard}}</span>
          </p>
          <hr />
          <p>
            <span>用户邮箱:</span>
            <span class="item">{{email}}</span>
          </p>
          <hr />
          <p>
            <span>创建日期:</span>
            <span class="item">{{createTime}}</span>
          </p>
        </el-card>
      </el-col>

      <el-col :span="15" style="margin-left:10px">
        <!-- 基本资料 -->
        <el-card style="height:550px">
          <div slot="header" class="clearfix">
            <span>基本资料</span>
          </div>

          <!-- 商铺信息 -->
          <el-tabs v-model="activeName" @tab-click="handleClick">
            <el-tab-pane label="商铺信息" name="first">
              <el-table :data="shopInfoTableData" border style="width: 100%;border-radius: 10px; margin-top: 10px" :header-cell-style="{
          background: '#1890ff',
          color: 'white',
          'text-align': 'center',
        }" :cell-style="{
          'text-align': 'center',
        }">
                <el-table-column prop="name" label="商铺编号" width="180" align="center">
                </el-table-column>
                <el-table-column prop="state" label="类型" width="180" align="center">
                  <template slot-scope="scope">
                    <el-tag v-if="scope.row.state == 'selled'">拥有</el-tag>
                    <el-tag v-if="scope.row.state == 'rented'" type="warning">租用</el-tag>
                  </template>
                </el-table-column>
                <el-table-column prop="creatorTime" label="开始时间" align="center">
                </el-table-column>
                <el-table-column prop="stateEndTime" label="结束时间" align="center">
                </el-table-column>
              </el-table>
            </el-tab-pane>

            <!-- 历史商铺信息 -->
            <el-tab-pane label="历史商铺信息" name="second">
              <el-table :data="historyShopInfoTableData" border style="width: 100%;border-radius: 10px; margin-top: 10px" :header-cell-style="{
          background: '#1890ff',
          color: 'white',
          'text-align': 'center',
        }" :cell-style="{
          'text-align': 'center',
        }">
                <el-table-column prop="name" label="商铺编号" width="180" align="center" />

                <el-table-column prop="state" label="类型" width="180" align="center">
                  <template slot-scope="scope">
                    <el-tag v-if="scope.row.state == 'selled'">拥有</el-tag>
                    <el-tag v-if="scope.row.state == 'rented'" type="warning">租用</el-tag>
                  </template>
                </el-table-column>
                <el-table-column prop="creatorTime" label="开始时间" align="center" />

                <el-table-column prop="stateEndTime" label="结束时间" align="center" />

              </el-table>
            </el-tab-pane>

            <!-- 代缴费信息 -->
            <el-tab-pane label="代缴费信息" name="third">
              <el-table :data="paymentInfoTableData" border style="width: 100%;border-radius: 10px; margin-top: 10px" :header-cell-style="{
          background: '#1890ff',
          color: 'white',
          'text-align': 'center',
        }" :cell-style="{
          'text-align': 'center',
        }">
                <el-table-column prop="feeItemName" label="收费项名称" width="100" align="center" />

                <el-table-column prop="beginDate" label="起收日期" width="100" align="center" />

                <el-table-column prop="endDate" label="到期日期" align="center" />

                <el-table-column prop="deadline" label="缴费期限" align="center" />

                <el-table-column prop="price" label="单价" align="center" />

                <el-table-column prop="num" label="数量" align="center" />

                <el-table-column prop="total" label="金额" align="center" />
              </el-table>
            </el-tab-pane>

            <!-- 历史缴费信息 -->
            <el-tab-pane label="历史缴费信息" name="fourth" style="">
              <el-table :data="historyPaymentInfoTableData" border style="width: 100%;border-radius: 10px; margin-top: 10px" :header-cell-style="{
          background: '#1890ff',
          color: 'white',
          'text-align': 'center',
        }" :cell-style="{
          'text-align': 'center',
        }">
                <el-table-column prop="feeItemName" label="收费项名称" width="100" align="center" />

                <el-table-column prop="beginDate" label="起收日期" width="100" align="center" />

                <el-table-column prop="endDate" label="到期日期" align="center" />

                <el-table-column prop="deadline" label="缴费期限" align="center" />

                <el-table-column prop="price" label="单价" align="center" />

                <el-table-column prop="num" label="数量" align="center" />

                <el-table-column prop="total" label="金额" align="center" />
              </el-table>
            </el-tab-pane>
          </el-tabs>
        </el-card>
      </el-col>

    </el-row>

  </div>
</template>

<script>
export default {
  data() {
    return {
      userName: "",
      phonenumber: "",
      idcard: "",
      email: "",
      createTime: "",
      companyName: "",

      activeName: "first",

      // 分页
      pageNum: 1,
      pageSize: 5,

      // 租借或已出售的房间名
      resourceName: "",

      // 获取商铺信息的url
      shopInfoTableData: [],
      url_GET_ShopInfoTableData: "http://localhost:8080/getConfigHouseList",
      // 历史商铺信息
      historyShopInfoTableData: [],
      url_GET_HistoryShopInfoTableData:
        "http://localhost:8080/getConfigHouseList",

      // 代缴费信息
      paymentInfoTableData: [],
      url_GET_PaymentInfoTableData: "http://localhost:8080/getPaymentBillInfo",
      // 历史缴费信息
      historyPaymentInfoTableData: [],
    };
  },
  methods: {
    back() {
      this.$router.back();
    },

    handleClick() {
      if (this.activeName == "first") {
        this.getShopInfo(this.pageNum, this.pageSize, this.companyName);
      }

      // 历史商铺信息
      if (this.activeName == "second") {
        this.getShopInfo(this.pageNum, this.pageSize, this.companyName);
      }

      // 代缴费信息
      if (this.activeName == "third") {
        this.getPaymentInfo(this.pageNum, this.pageSize, this.userName, "0");
      }

      // 历史缴费信息
      if (this.activeName == "fourth") {
        this.getPaymentInfo(this.pageNum, this.pageSize, this.userName, "1");
      }
    },

    // 获取商铺信息的方法（已完成）
    getShopInfo(pageNum, pageSize, companyName) {
      console.log("调用了");
      this.$http
        .get(this.url_GET_ShopInfoTableData, {
          params: {
            pageNum: pageNum,
            pageSize: pageSize,
            companyName: companyName,
          },
        })
        .then((result) => {
          this.shopInfoTableData = result.data.data.list;
          console.log(this.shopInfoTableData);
        })
        .catch((err) => {
          console.log(err + "获取商铺信息错误");
        });
    },

    // 获取历史商铺信息的方法
    getHistoryShopInfo(pageNum, pageSize, companyName) {
      console.log("调用了");
      this.$http
        .get(this.url_GET_ShopInfoTableData, {
          params: {
            pageNum: pageNum,
            pageSize: pageSize,
            companyName: companyName,
          },
        })
        .then((result) => {
          this.shopInfoTableData = result.data.data.list;
          console.log(this.shopInfoTableData);
        })
        .catch((err) => {
          console.log(err + "获取商铺信息错误");
        });
    },

    // 获取代缴费信息的方法
    // 获取历史缴费信息的方法
    getPaymentInfo(pageNum, pageSize, userName, status) {
      console.log("调用了");
      this.$http
        .get(this.url_GET_PaymentInfoTableData, {
          params: {
            pageNum: pageNum,
            pageSize: pageSize,
            userName: userName,
            status: status,
          },
        })
        .then((result) => {
          this.paymentInfoTableData = result.data.data.list;
          console.log(this.shopInfoTableData);
        })
        .catch((err) => {
          console.log(err + "获取商铺信息错误");
        });
    },
  },

  mounted() {
    this.userName = this.$route.params.mapObj.get("userName");
    this.phonenumber = this.$route.params.mapObj.get("phoneNumber");
    this.idcard = this.$route.params.mapObj.get("idCard");
    this.email = this.$route.params.mapObj.get("user_EMail");
    this.createTime = this.$route.params.mapObj.get("createTime");
    this.companyName = this.$route.params.mapObj.get("companyName");
    console.log(this.$route.params);
    console.log(this.$route.params.mapObj.get("userName"));

    this.getShopInfo(this.pageNum, this.pageSize, this.companyName);
  },
};
</script>

<style>
.text {
  font-size: 14px;
}
p {
  padding: 20px 10px;
}

.box {
  width: 400px;
  height: 400px;
}
.item {
  margin-left: 30px;
}
.align-right hr {
  margin-right: 0;
}
</style>